<template>
  <view class="layout">
    <view class="title-bar">
      <view class="left-title">
        <view class="flag" />
        <wd-text text="运动记录(最佳)" color="#000000" size="18px" />
      </view>
    </view>
    <view v-for="item in sportList" :key="item.id" class="sport-item">
      <view class="title-layout">
        <view>{{ item.name }}</view>
        <view>
          当前分数：{{ item.score }}
          <wd-tag type="primary" mark> 及格 </wd-tag>
        </view>
      </view>
      <wd-progress :percentage="20" color="#F0A619" />
      <view class="number-layout">
        <view class="number"> 个数 </view>
        <view class="number"> 50 </view>
        <view class="number"> 100 </view>
        <view class="number"> 150 </view>
        <view class="number"> 200 </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
interface Sport {
  name: string;
  score: number;
}
const sportList = ref<Sport[]>([
  { id: 1, name: "跳绳", score: 60 },
  { id: 2, name: "开合跳", score: 70 },
]);
</script>

<style lang="scss" scoped>
.layout {
  width: calc(100% - 60px);
  margin: 20px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 10px;
}
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.flag {
  width: 2px;
  height: 11px;
  background: #095aeb;
  margin-right: 10px;
}
.left-title {
  display: flex;
  align-items: center;
}
.flex-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.number {
  font-size: 10px;
  font-weight: normal;
  text-align: center;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  color: #999999;
}
.number-layout {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.title-layout {
  display: flex;
  justify-content: space-between;
}
.sport-item {
  margin-top: 10px;
  width: 100%;
  height: 85px;
  border-radius: 10px;
  background: #fff9f4;
}
</style>
